<template>
	<view class="body">
		<view class="relic-body-content" :style="{justifyContent: relicList.length % 2 === 0 ? spaceAround : spaceBetween}"
		v-if="likeIds.length !== 0">
			<view class="relic-item" v-for="(item, i) in relicList" 
			:key="i" >
				<my-relic :relic="item" :likeIds="likeIds" @praiseClick="praiseClickHandler"></my-relic>
			</view>
		</view>
		<view class="empty-content" v-if="likeIds.length === 0">
			<view class="">空空如也，快去给你喜欢的文物点赞吧！</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//跳转的文物列表
				relicList: [],
				//当前用户
				visitor: {},
				//用户是否点赞
				isPraise: [],
				//用户点赞的id数组
				likeIds: []
			}
		},
		methods: {
			//获取用户喜欢文物id
			async setLikeIds() {
				this.visitor = JSON.parse(uni.getStorageSync('personInfo') || '{}')
				
				//需要先判断用户实名没有，只有实名才能给文物点赞，才能拥有自己点赞的文物
				if(Object.keys(this.visitor).length === 0) {
					return
				}
				
				const {data: result} = await uni.$http.get('/visitor/likeExhibitIds/' + this.visitor.visitorIdCard)
				const IdsStr = result.likeIds
			
				if(!IdsStr) {
					this.likeIds = []
					return
				}
				const likeIds = IdsStr.split(',')
				this.likeIds = likeIds
			},
			//设置用户喜欢的文物展示列表
			async setRelicList() {
				
				this.visitor = JSON.parse(uni.getStorageSync('personInfo') || '{}')
				
				//需要先判断用户实名没有，只有实名才能给文物点赞，才能拥有自己点赞的文物
				if(Object.keys(this.visitor).length === 0) {
					return
				}
				
				const {data: result} = await uni.$http.get('/visitor/likeExhibitIds/' + this.visitor.visitorIdCard)
				const IdsStr = result.likeIds
							
				if(!IdsStr) {
					this.likeIds = []
					return
				}
				const likeIds = IdsStr.split(',')
				
				console.log("this.likeIds.join(','): ", likeIds.join(','))
				const {data: res} = await uni.$http.get(`/exhibits/listByIds?ids=${likeIds.join(',')}`)
				// console.log("数据：",res)
				if(res.msg !== 'success') return uni.$showMsg('数据加载失败')
				
				this.relicList = res.list
			},
			//用户给文物点赞
			async praiseClickHandler(exhibit) {
				const isPraise = this.checkPraise(exhibit)
				// console.log("点赞状态：", isPraise)
				// 判断此时的点击状态
				var update = 0
				if(isPraise) {
					update = -1
					
					//更新本地个人喜欢文物id列表
					// this.likeIds = this.likeIds.filter(x => x != exhibit.exhibitId)
					let visitorUpdate = {
						visitorIdCard: this.visitor.visitorIdCard,
						likeExhibitIds: this.likeIds.filter(x => x != exhibit.exhibitId).join(',')
					}
					const {data: res2} = await uni.$http.post('/visitor/updateIds', visitorUpdate)
					if(res2.msg !== 'success') return uni.$showMsg('更新个人喜爱的文物列表失败！')
					this.setLikeIds()
					
				}else {
					update = 1
					this.likeIds = [...this.likeIds,exhibit.exhibitId]
					
					let visitorUpdate = {
						visitorIdCard: this.visitor.visitorIdCard,
						likeExhibitIds: this.likeIds.join(',')
					}
					
					const {data: res2} = await uni.$http.post('/visitor/updateIds', visitorUpdate)
					if(res2.msg !== 'success') return uni.$showMsg('更新个人喜爱的文物列表失败！')
					this.setLikeIds()
				}
				
				//修改点赞总数
				const newExhibit = {
					exhibitId: exhibit.exhibitId,
					exhibitNo: exhibit.exhibitNo,
					praises: exhibit.praises + update,
				}
				
				//给后端发送请求改变数据
				const {data: res} = await uni.$http.post('/exhibits/update/praise', newExhibit)
				if(res.msg !== 'success') return uni.$showMsg('修改文物点赞总数失败')
				
				//变换本地点赞个数
				this.setRelicList()
				
				if(this.checkPraise(exhibit) === false) return uni.$showMsg('取消点赞')
				else return uni.$showMsg('点赞成功')
			},
			//检查该文物是否被用户点赞
			checkPraise(item) {
				
				if(this.likeIds === []) {
					return false
					// this.isPraise.push(false)
				}
				else {
					let flag = 0
					this.likeIds.forEach(x => {
						if(x === item.exhibitId) {
							flag = 1
							// this.isPraise.push(true)
						}
					})
					if(flag === 1) return true
					else return false
				}
			},
			
		},
		onLoad(options) {
			
			//设置用户点赞的文物id数组
			this.setLikeIds()
			//设置文物列表
			this.setRelicList()
			
		}
	}
</script>

<style lang="scss">
.body {	
	width: 370px;
	//文物的主盒子
	.relic-body-content {
		display: flex;
		// justify-content: space-between;
		margin: 10px;
		flex-wrap: wrap;
		
	}
	
	
	
	.empty-content {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25px;
		color: gray;
		margin: 20px;
	}
}
</style>
